<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

<body>
  <script>
    var arr = [2, 78, 45, 25, 87, 9, 54]
    // arr.forEach(function (ele, index, arr) {
    //   console.log(ele, index, arr);
    // });
    // var list = document.querySelectorAll('li')
    // list.forEach(function (ele, index, arr) {
    //   console.log(ele, index, arr);
    //   ele.onclick = function () {
    //     console.log(this)
    //   }
    // });
    // //map
    // var newArr = arr.map(function (e, i, arr) {
    //   if (e > 20) {
    //     e += 5
    //     return e
    //   }
    // })
    // console.log(newArr)

    // var newArr = arr.filter(function (e, i, arr) {
    //   if (e > 20)

    //     return e
    // })
    // console.log(newArr)

    // var flag1 = arr.some(function (e, i, arr) {
    //   return e > 100
    // })
    // console.log(flag1);
    // var flag2 = arr.every(function (e, i, arr) {
    //   return e > 100
    // })
    // console.log(flag2);
    var initialValue = 0
    var sum = arr.reduce(function (total, value, index, array) {
      (total, value) => total + value, 0
    }, initialValue)
    console.log(sum);
  </script>
</body>

</html>